export const mounted = (el) => {
  const target = el;
  target.style.position = "relative";

  const dom = document.createElement('DIV');
  dom.style.height = '100%';
  dom.style.width = '5px';
  dom.style.position = 'absolute';
  dom.style.top = '0';
  dom.style.right = '0';
  dom.style.zIndex = '1';
  dom.style.cursor = 'col-resize';
  dom.style.backgroundColor = 'transparent';
  dom.style.userSelect = 'none';
  dom.style.touchAction = 'none';

  dom.onmouseout = () => {
    dom.style.backgroundColor = 'transparent';
  };

  dom.onmousedown = (e) => {
    const currPosX = e.clientX;
    const targetWidth = target.clientWidth;
    const minWidth = 100;
    const maxWidth = 800;

    document.onmousemove = (e) => {
      const distanceX = e.clientX - currPosX;
      let newWidth = targetWidth + distanceX;
      newWidth = newWidth < minWidth ? minWidth : newWidth;
      newWidth = newWidth > maxWidth ? maxWidth : newWidth;
      target.style.width = `${newWidth}px`;
    };

    document.onmouseup = () => {
      dom.style.backgroundColor = 'transparent';
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };

  target.appendChild(dom);
};